一、Css简介

  1. CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。其主要的用途是定义网页数据的编排、显示、格式化及特殊效果，以克服HTML方式的缺陷，
  2. CSS是用来扩展HTML的，而不是用来替代HTML的。也就是CSS离不开HTML，他只是一项辅助工具。
  1. 在HTML文件的标记符内嵌入----嵌入样式表 (嵌入)
这种方式利用<style>标记将样式表嵌入HTML文件的
头信息标识符<head>里：
<head>
<style type=”text/css”>
<!--
样式表的具体内容
-->
</style>
</head>
type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“<!--注释内容-->”。
  1. CSS基本语法：
    selector{property:value;property2:value2….}
  2. 包含最基本的两部分
    a.选择符(selector)
    b.声明：大括号里面的都是声明

分析CSS (css样式的基本书写格式)

selector{ font-family:”宋体”；font-style:italic}
  1. 选择符即样式名称
  2. 用大括号包围样式格式
  3. 样式属性
  4. 用冒号表明属性和属性值的关系
  5. 样式属性值

例子：

body{color:yellow;font-size:20px}
  1. 选择符：body
  2. 声明：由两部分组成：
    1. 属性：本例：color
    2. 值： 本例：yellow

选择符：

在css中，共有如下几种selector类别
  1. HTML标记符
  2. 用户定义的类class
  3. 用户定义的id
  4. 虚类：
    HTMl标记符:最典型的selector类型
    例：
    H1{text-align:right;color:red}
    其中H1为标记符

组合：

  1. 可以把具有相同声明定义的选择符组合在一起，并用逗号隔开。
    例：
    h1,h2,h3{color:yellow}
  2. 同理，声明也可以组合在一起，它们之间用分号隔开
    例：
    h1{color:yellow;font-size:10}
  3. 用户定义的类class选择符：
    可以使用类来为单一HTML标记符创建多个样式，也就是允许同一个元素有不同样式,用“.”做标记。
    . mystyle{property:value}

    例：<p class=“mystyle”>一段文字</p>
    注：如果希望对选中的文本，而不是整个段落应用自定义的样式，则需要使用带有class的<span>标记
    <p> 一段<span class=“mystyle”>文字</span></p>
  4. Id选择符
    1. id选择符也和class的作用是一样的
    2. id选择符个别地定义每个元素的成分，这种选择符应该尽量少用，它具有一定的局限性.
    3. 一个id选择符的指定要有指示符“＃”在名字前面（区别于class的“.”号）。
      例：
      # aa {color:red}
  5. 虚类
    1. 虚类也可以叫伪类
    2. 它可以指定Ａ元素以不同的方式显示链接
      例1：
      : link {color:gray}
      : visited {color:red}
      : hover{color:yellow}
      : active {color:green}


      例：放在<head>中
      <style type="text/css">
      <!--
      a:link {
      　color: #666666;
      　text-decoration: none;}
      a:hover {
      　color: #FF0000;
      　text-decoration: underline;}
      -->
      </style>
      其中<-- -->是注释，目的是若碰到不支持样式的浏览器时也不会产生错误信息

注：

a.利用<style>…</style>标记符在HTML文档的<head>标记符内定义，
b.这种方法中，css与HTML文档要放在同一文档中。
c.在指定的值前后通常加上双引号，例如：color:”green”,如果值是英文字母、数字时，双引号可以省略。

2 在HTML文档中加入样式定义---内联样式 (局部引用)

这种方式是HTML标记中应用样式定义，由于样式是在标记内部使用，所以称做“内联样式”

方法：将标记的style属性值赋为所定义的样式规则。
例：<p style=”color: blue; font-size: 10pt”>CSS实例


代码说明：
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”
  1. 这种方法适用于指定网页内的某一小段文字的显示风格。
  2. 如果字里行间的css样式与<head>内在定义的css或外在连结的css相冲突，浏览器的显示将以行间的css为主
    1. 文本框是黑色的,字体是白色的
    2. 口令框背景是灰色的
    3. 单选框和复选按钮的背景是红色的
    4. 下拉框选择的是丰富多彩的背景
    5. 多行文本框的背景是一个图象
    6. 按钮的背景是有颜色的
    7. 按钮的背景是一个图象

3使用<link>标记符链接到外部的样式表单----链接样式表 (链接)

同样是添加在HTML的头信息标识符<head>里：
<head>
<link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>
</head>
  1. Rel属性表示样式表将以何种方式与HTML文档结合。取值范围：
    ·Stylesheet：指定一个外部的样式表
    ·Alternate stylesheet：指定使用一个交互样式表
  2. *.css是单独保存的样式表文件，其中不能包含<style>标识符，并且只能以css为后缀。
  3. Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围：
    4. 如果要输出到多种媒体，可以用逗号分隔取值表。
注：
  1. 如果一个样式要应用一个或少数个网页，可以用上面的方法，但是如果有数个，就要用链接了
  2. <link>标记符可使我们定义保存一个单独的文档中，然后链接到文档中。
  3. 这种方法最方便管理整个网站的网页风貌。

这种方式分为两步：

  1. 建立一个*.css文件
  2. 在使用该样式的HTML文档中导入css文件。

例：

  1. 建一个css文件
    body {background-color:red;}
  2. 在你想要应用这个样式的HTML文档的<head>中链接就可以了
    <link type="text/css" rel="stylesheet" href="css/bg.css">
理解与使用css的属性
总的来说，css提供了8大类属性
1 类型属性: 用来设置HTML组件的字体、字号等
2 背景属性: 用来设置HTML组件的背景颜色,图象
3 区块属性：用来设置HTML组件的字距、行号等
4 方框属性：用来设置HTML组件的显示方式、对齐方式等
5 定位属性：用来设置层的显示方式、对齐方式等
6 边框属性：边框粗细、高度及颜色等
7 扩展属性：用来设置鼠标及滤镜效果
8 列表属性: 用来设置列表属性